<template>
  <div>
    <ul class="menu-one">
      <li v-for="item in list" :key="item.id"> <!-- 第一层 -->
        <p class="one-li border-bottom"><span class="NB"></span> {{ item.title }}</p>
        <ul>
          <li v-for="items in item.children" :key="items.id" @click="isshow(items.id)"> <!-- 第二层 -->
              <p class="one-li2 border-bottom">
                {{ items.title }}
              <span class="li2"><span class="li2-color">￥<i class="li2-size">{{ items.lowerPrice }}</i></span>起</span>
              </p>
              <cx-k :list="items.children" v-show="showids.includes(items.id)"></cx-k> <!-- 第三层 -->
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
'use strict'
import CxK from './detaSan.vue'

export default {
  name: 'Detaxx',
  components: {/* 注册组件 */
    CxK
  },
  props: {
    list: Array
  },
  data () {
    return {
      showids: []
    }
  },
  methods: {
    isshow (id) {
      if (!this.showids.includes(id)) {
        this.showids.push(id)
      } else {
        let newids = this.showids.filter((item) => {
          return item !== id
        })
        this.showids = newids
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .menu-one
    background white
    margin-bottom 0.2rem
    >li
      background-color #E4E7EA
      padding-bottom 0.2rem
      >p
        background-color #FFFFFF
      >ul
        background-color #FFFFFF
    .NB
      display: inline-block;
      position: absolute;
      width: .36rem;
      height: .36rem;
      top: .26rem;
      left: .2rem;
      background: url('//s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -.45rem no-repeat;
      margin-right: .1rem;
      background-size: .4rem 3rem;
    .one-li
      height 0.92rem
      line-height 0.92rem
      font-size 0.32rem
      padding-left 0.6rem
    .one-li2
      height 0.92rem
      line-height 0.92rem
      font-size 0.3rem
      padding-left 0.2rem
      position relative
      .li2
        color #9E9E9E
        position absolute
        right 0.2rem
        .li2-color
          color #FF9800
          .li2-size
            font-size 0.44rem
    .ul3
      overflow auto
      background-color #F5F5F5
      li
        overflow auto
      .left
        width 65%
        float left
        padding-left 0.2rem
        p
          padding-bottom 0.2rem
        .left-p1
          padding-top 0.2rem
        .left-p2
          color #616161
      .right
        width 35%
        height 1.92rem
        float left
        display flex
        flex-direction column
        align-items center
        justify-content center
        .li2-color
          color #FF9800
          .li2-size
            font-size 0.44rem
        .right-span
          display inline-block
          width 80%
          text-align center
          padding 0.2rem 0
          background #FF9B17
          border-radius 0.1rem
          color white
</style>
